{% extends "base.html" %}

{% block head-title %}{{algorithm.algorithm_name}}{% endblock %}

{% block title %}{{algorithm.algorithm_name}}{% endblock %} 

{% block content %}
<script src="/static/js/data_visualization/3.js"></script>
<form action="/data_visualization/configure_parameters/" method="post" class="uk-form" id="form1"
					onsubmit="return onForm1Submit();">
	{%csrf_token%}
	<input type="hidden" name="instance_id" value="{{algorithm.instance_id}}"/>
	<fieldset>
		<legend>配置参数(3/3)</legend>
			{% ifequal algorithm.algorithm_name "简单图表" %}
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表标题:<input type="text" value="我的图表" name="chart_title" />
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表类型:
						<select name="chart_type">
							<option value="bar">条形图</option>
							<option value="line">折线图</option>
							<option value="scatter">散点图</option>
							<option value="smooth_line">平滑曲线图</option>
							<option value="area_line">面积图</option>
							<option value="pie">饼图</option>
						</select>
					</div>
				</div>
			{% endifequal %}
			{% ifequal algorithm.algorithm_name "简单Matplotlib图表" %}
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表标题:<input type="text" value="我的图表" name="chart_title" />
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表类型:
						<select name="chart_type">
							<option value="bar">条形图</option>
							<option value="line">折线图</option>
							<option value="scatter">散点图</option>
							<option value="pie">饼图</option>
						</select>
					</div>
				</div>
			{% endifequal %}
			{% ifequal algorithm.algorithm_name "复合图表" %}
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表标题:<input type="text" value="我的图表" name="chart_title" />
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表类型(1):
						<select name="chart_type_1">
							<option value="bar">条形图</option>
							<option value="line">折线图</option>
						</select>
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表类型(2):
						<select name="chart_type_2">
							<option value="line">折线图</option>
							<option value="bar">条形图</option>
						</select>
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						使用次坐标轴:
						<select name="use_2nd_axis">
							<option value="True">是</option>
							<option value="">否</option>
						</select>
					</div>
				</div>
			{% endifequal %}
			{% ifequal algorithm.algorithm_name "复合Matplotlib图表" %}
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表标题:<input type="text" value="我的图表" name="chart_title" />
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表类型(1):
						<select name="chart_type_1">
							<option value="bar">条形图</option>
							<option value="plot">折线图</option>
						</select>
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						图表类型(2):
						<select name="chart_type_2">
							<option value="plot">折线图</option>
							<option value="bar">条形图</option>
						</select>
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						使用次坐标轴:
						<select name="use_2nd_axis">
							<option value="True">是</option>
							<option value="">否</option>
						</select>
					</div>
				</div>
			{% endifequal %}
			{% ifequal algorithm.algorithm_name "地图标注" %}
				<div class="uk-form-row">
					<div class="uk-form-controls">
						标注类型:
						<select name="overlay_type">
							<option value="marker">标注点</option>
							<option value="label">纯文本</option>
						</select>
					</div>
				</div>
			{% endifequal %}
			{% ifequal algorithm.algorithm_name "热力图" %}
				<div class="uk-form-row">
					<div class="uk-form-controls">
						半径(米):
						<select name="radius">
							<option value="20">20</option>
							<option value="40" selected>40</option>
							<option value="60">60</option>
							<option value="80">80</option>
							<option value="100">100</option>
						</select>
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						不透明度:
						<select name="opacity">
							<option value="0">0</option>
							<option value="0.2">0.2</option>
							<option value="0.4">0.4</option>
							<option value="0.6">0.6</option>
							<option value="0.8">0.8</option>
							<option value="1.0">1.0</option>
						</select>
					</div>
				</div>
				<div class="uk-form-row">
					<div class="uk-form-controls">
						最大值:
						<select name="max">
							<option value="50">50</option>
							<option value="100" selected>100</option>
							<option value="150">150</option>
							<option value="200">200</option>
						</select>
					</div>
				</div>
			{% endifequal %}
	</fieldset>
	<div class="uk-form-row" style="margin-top:5px;">
		<a href="javascript:history.go(-1);" class="uk-button">上一步</a>
		<input class="uk-button uk-button-primary" type="submit"
			value="提交" style="float: right;">
	</div>
</form>
{% endblock %}